<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>echarts</title>
    <style>
      .container {
        width: 800px;
        height: 400px;
        background-color: rgba(0, 0, 0, 0.2);
      }
    </style>
  </head>
  <body>
    <div class="container"></div>
    <script src="./echarts.min.js"></script>
    <script>
      const myEcharts = echarts.init(document.querySelector(".container"));
      const option = {
        // 布局
        grid: {
          left: 10,
          right: 10,
          containLabel: true,
        },
        xAxis: {
          data: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],
        },
        yAxis: {},
        // 提示框组件：鼠标移入会有数据提示
        tooltip: {},
        // 工具箱
        toolbox: {
          feature: { dataView: {}, saveAsImage: {} },
        },
        // 数据缩放：查看一定范围内数据
        dataZoom: [{ type: "slider" }],
        // 图例：切换显示隐藏图表
        legend: {
          data: ["柱形图", "折线图", "饼图"],
        },
        series: [
          {
            name: "柱形图",
            type: "bar",
            data: [20, 25, 18, 30, 10, 20, 25, 18, 30, 10, 22, 33],
          },
          {
            name: "折线图",
            type: "line",
            data: [30, 35, 28, 40, 20, 30, 35, 28, 40, 20, 32, 43],
          },
          {
            name: "饼图",
            type: "pie",
            data: [
              {
                name: "xx",
                value: 10,
              },
              {
                name: "yy",
                value: 20,
              },
              {
                name: "zz",
                value: 30,
              },
            ],
            radius: ["0", "20%"], // 半径
            center: ["70%", "12%"], // 圆心点坐标
          },
        ],
      };
      myEcharts.setOption(option);
    </script>
  </body>
</html>
